<template>
  <div class="dept">
    <el-row>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="info" @click="refresh">刷新</el-button>
    </el-row>

    <el-tree
        v-loading="treeLoading"
        :data="data"
        :props="defaultProps"
        :expand-on-click-node="false"
        default-expand-all
    >
      <span slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <i
            class="el-icon-edit"
            style="margin-left: 100px;"
            @click="updata(data)"
        /><el-button type="text" @click="updata(data)">编辑</el-button>
        <i
            class="el-icon-delete"
            style="margin-left: 10px; color: red"
            @click="remove(data)"
        /><el-button type="text" @click="remove(data)" >删除</el-button>
      </span>
    </el-tree>

    <el-drawer :title="title" :visible.sync="drawer" :wrapperClosable="false" >
      <el-form
          v-loading="drawerLoading"
          ref="form"
          :model="deptData"
          label-width="80px"
          class="loginContainer"
      >
        <!-- 隐藏域，用于保存id-->
        <el-input type="hidden" v-model="deptData.id"></el-input>

        <el-form-item label="组织名称">
          <el-input type="text" v-model="deptData.deptName"></el-input>
        </el-form-item>

        <el-form-item label="上级组织编号">
          <el-input type="text" v-model="deptData.parentId"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      treeLoading: false,
      title: "",
      drawer: false,
      drawerLoading: false,
      deptData: { id: null, deptName: "", parentId: 1 },
      defaultProps: {
        children: "children",
        label: "deptName",
        key: "id",
      },
    };
  },
  methods: {
    //更新
    async updata(data) {
      this.title = "编辑部门";
      this.drawer = true;
      this.deptData = data;
    },
    async save() {
      let result = await this.$http.post("/dept", this.deptData);
      console.log(this.deptData)
      console.log(result)
      this.$message.info("保存成功");
      this.drawer = false;
      this.refresh();
    },

    cancel() {
      this.drawer = false;
    },
    //创建
    add() {
      this.title = "编辑组织";
      this.drawer = true;
      this.drawerLoading = true;
      this.deptData = { id: null, deptName: "", parentId: 1 };
      this.drawerLoading = false;
    },
    //删除
    remove(data) {
      // console.log(data);
      this.$confirm("该操作将永久删除此记录，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let result = await this.$http.delete("/dept/" + data.id);
        this.$message("删除成功");
        this.refresh();
      });
    },
    //刷新
    async refresh() {
      this.treeLoading = true;
      let result = await this.$http.get("/dept/tree");
      this.data = result.data;
      this.treeLoading = false;
    },
  },
  mounted() {
    this.refresh();
  },
};
</script>

<style lang="less" scoped>
.dept {
  .el-row {
    margin: 10px;
  }
}
</style>
